import React from "react";
import { Avatar, Card, Collapse, Space } from "antd";
import { UserOutlined, EditOutlined, SettingOutlined } from "@ant-design/icons";

import styles from "./index.module.less";
import { ChatMessageI } from "../../../../types/system";
import Meta from "antd/es/card/Meta";

interface PropsI {
  data: ChatMessageI[];
}

const MessageHistory: React.FC<PropsI> = (props: PropsI) => {
  const { data } = props;
  const windowRef = React.useRef<HTMLDivElement>(null);
  const contentRef = React.useRef<HTMLDivElement>(null);
  // const messageId = useId();
  const handleClick = (data: ChatMessageI) => {
    console.log(data);
  };

  React.useEffect(() => {
    if (windowRef.current && contentRef.current) {
      windowRef.current.scrollTop = contentRef.current.scrollHeight;
    }
  });

  return (
    <div ref={windowRef} className={styles.messageHistory}>
      <div ref={contentRef}>
        {data.map((item: ChatMessageI) => {
          return (
            <div key={item.id} className={styles.message}>
              <Card
                style={{
                  backgroundColor: item.role === "user" ? "#e6f4ff" : "#bae0ff",
                }}
              >
                <Meta
                  avatar={<Avatar size="small" icon={<UserOutlined />} />}
                  title={item.role === "user" ? "我" : "药学GPT"}
                />
                <p>{item.content}</p>
                <Collapse
                  items={
                    item.role !== "user"
                      ? [
                          {
                            key: "item",
                            label: "参考资料",
                            children: (
                              <div>
                                {["a", "b", "c"].map((ref: string) => {
                                  return <p key={ref}>{ref}</p>;
                                })}
                              </div>
                            ),
                          },
                        ]
                      : []
                  }
                />
                {item.role !== "user" && (
                  <div
                    onClick={() => handleClick(item)}
                    className={styles.messagePanel}
                  >
                    赞
                  </div>
                )}
              </Card>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default MessageHistory;
